<div class="card">
  <div class="card-header">
    添加表单
    <button class="btn btn-sm btn-primary" style="float:right;margin-right: 10px;" (click)="save()">保存</button>
  </div>
  <div class="card-body" [formGroup]="fb.form">
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">表单名称</label>
      <div class="col-sm-10">
        <input type="text" [class.is-valid]="fb.form.get('title').valid" [class.is-invalid]="!fb.form.get('title').valid" placeholder="请输入表单名称"
          class="form-control" formControlName="title">
        <div [class.invalid-feedback]="!fb.form.get('title').valid" [class.valid-feedback]="fb.form.get('title').valid">
          请输入表单名称!
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">提交按钮</label>
      <div class="col-sm-10">
        <input type="text" [class.is-valid]="fb.form.get('btn').valid" [class.is-invalid]="!fb.form.get('btn').valid" placeholder="请输入提交按钮"
          class="form-control" formControlName="btn">
        <div [class.invalid-feedback]="!fb.form.get('btn').valid" [class.valid-feedback]="fb.form.get('btn').valid">
          请输入提交按钮!
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">数据表名</label>
      <div class="col-sm-10">
        <input type="text" [class.is-valid]="fb.form.get('table').valid" [class.is-invalid]="!fb.form.get('table').valid" placeholder="请输入数据表名"
          class="form-control" formControlName="table">
        <div [class.invalid-feedback]="!fb.form.get('table').valid" [class.valid-feedback]="fb.form.get('table').valid">
          请输入数据表名!
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">
        动态参数
        <a class="btn btn-sm" style="color: red;" (click)="fb.addParams()">添加</a>
      </label>
      <div class="col-sm-10">
        <div class="form-row" [formGroup]="item" *ngFor="let item of fb.params.controls;index as i;">
          <div class="form-group col-md-3">
            <label [attr.for]="'paramsname'+i">参数名</label>
            <input type="text" [class.is-valid]="item.get('name').valid" [class.is-invalid]="!item.get('name').valid" placeholder="请输入参数名"
              class="form-control" formControlName="name">
          </div>
          <div class="form-group col-md-3">
            <label [attr.for]="'type'+i">表单名</label>
            <input type="text" [class.is-valid]="item.get('form').valid" [class.is-invalid]="!item.get('form').valid" placeholder="请输入表单名"
              class="form-control" formControlName="form">
          </div>
          <div class="form-group col-md-1">
            <a class="btn btn-sm" style="color: red;" (click)="fb.deleteParams(i)">删除</a>
          </div>
        </div>
      </div>
    </div>

    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">
        表单
        <a class="btn btn-sm" style="color: red;" (click)="fb.addFields()">添加</a>
      </label>
      <div class="col-sm-10">
        <div class="form-row" *ngFor="let item of fb.fields.controls;index as i;" [formGroup]="item">
          <div class="form-group col-md-2">
            <label [attr.for]="'title'+i">标题</label>
            <input type="text" [class.is-valid]="item.get('title').valid" [class.is-invalid]="!item.get('title').valid" placeholder="请输入标题"
              class="form-control" formControlName="title">
          </div>
          <div class="form-group col-md-2">
            <label [attr.for]="'name'+i">表单名</label>
            <input type="text" [class.is-valid]="item.get('name').valid" [class.is-invalid]="!item.get('name').valid" placeholder="请输入表单名"
              class="form-control" formControlName="name">
          </div>
          <div class="form-group col-md-2">
            <label [attr.for]="'type'+i">类型</label>
            <select class="form-control" [class.is-valid]="item.get('type').valid" [class.is-invalid]="!item.get('type').valid" formControlName="type"
              [attr.id]="'type'+i">
              <option *ngFor="let op of types" [attr.value]="op.value">{{op.title}}</option>
            </select>
          </div>
          <div class="form-group col-md-2">
            <label [attr.for]="'placeholder'+i">输入提示</label>
            <input type="text" [class.is-valid]="item.get('placeholder').valid" [class.is-invalid]="!item.get('placeholder').valid" placeholder="请输入输入提示"
              class="form-control" formControlName="placeholder">
          </div>
          <div class="form-group col-md-1">
            <label [attr.for]="'required'+i">必填</label>
            <input type="checkbox" formControlName="required" class="form-control" [attr.id]="'required'+i">
          </div>
          <div class="form-group col-md-2">
            <label [attr.for]="'empty'+i">为空提醒</label>
            <input type="text" formControlName="empty" class="form-control" [attr.id]="'empty'+i">
          </div>
          <div class="form-group col-md-1">
            <a class="btn btn-sm" style="color: red;" (click)="fb.deleteField(i)">删除</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>